<script setup lang="ts">
import html2canvas from 'html2canvas'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import { parseTime } from '@/utils/ruoyi'
import exportPDF from '@/utils/exportPDF'

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
    }
>()

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById('page-pdf')!, { logging: false, scale: window.devicePixelRatio * 3 }),
  ])
  exportPDF(await promise, 'p', 'cm', [21, 29.7])
}

defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_disciplines,
  student_nation,
  student_political,
  student_language,
} = useDict(
  'sys_user_sex',
  'student_disciplines',
  'student_nation',
  'student_political',
  'student_language',
)
</script>

<template>
  <div id="page-pdf" class="page-pdf">
    <h2 style="font-family: '黑体';">附件3</h2>
    <div class="title" >
      <p style="font-weight: bold;">贵州省专科生国家助学金申请表</p>
    </div>
    <div class="page">
      <div class="center">
        <div class="yc">
          <span class="left">本人</span>
          <span class="left">情况</span>
        </div>
      </div>
      <div class="men" style="border:0">
        <div>姓名</div>
        <div>{{ student?.studentName }}</div>
        <div>性别</div>
        <div style="padding: 0; border-collapse: collapse;">
          <DictTag :options="sys_user_sex" :value="student?.sex" type="text" style="border:none;"/>
        </div>
        <div>出生年月</div>
        <div> {{ parseTime(student?.birthday || '', '{y}年{m}月') }}</div>
        <div class="imge center">照片</div>
        <div>民族</div>
        <div>{{ student?.studentNation }}</div>
        <div>政治面貌</div>
        <div>{{ student?.studentPolitical }}</div>
        <div>入学时间</div>
        <div></div>
        <div>学号</div>
        <div class="xuehao">{{ student?.studentCode }}</div>
        <div>所在年级</div>
        <div>{{ student?.studentGrade }}</div>
        <div>身份证号</div>
        <div class="hao">{{ student?.studentIdCard }}</div>
        <div>联系电话</div>
        <div>{{ student?.phonenumber }}</div>
        <div class="col">
          <span>贵阳人文科技学院&nbsp;</span>
          <span class="cols">{{ student?.studentCollege }}</span>
          <span>学院(系)&nbsp;</span>
          <span class="cols">{{ student?.studentMajor }}</span>
          <span>专业&nbsp;</span>
          <span class="cols">{{ student?.studentClass }}</span>
          <span>班</span>
        </div>
      </div>
      <div class="center">
        <div class="yc">
          <span class="left">家庭</span>
          <span class="left">经济</span>
          <span class="left">情况</span>
        </div>
      </div>
      <div class="family" style="border:0">
        <div class="one">家庭人口总数</div>
        <div class="one1"></div>
        <div class="one">家庭月总收入</div>
        <div></div>
        <div>人均月收入</div>
        <div></div>
        <div>收入来源</div>
        <div></div>
        <div class="one ccc">家庭住址</div>
        <div class="two ccc">{{ student?.studentAddress }}</div>
        <div class="ccc">邮政编码</div>
        <div class="ccc"></div>

      </div>
      <div class="center">
        <div class="yc">
          <span class="left">家庭</span>
          <span class="left">成员</span>
          <span class="left">情况</span>
        </div>
      </div>
      <div class="study" style="border:0">
        <div class="one">姓名</div>
        <div>年龄</div>
        <div>与本人关系</div>
        <div class="zzz">工作或学习单位</div>
        <div class="one"></div>
        <div></div>
        <div></div>
        <div class="zzz"></div>
        <div class="one"></div>
        <div></div>
        <div></div>
        <div class="zzz"></div>
        <div class="one"></div>
        <div></div>
        <div></div>
        <div class="zzz"></div>
        <div class="one"></div>
        <div></div>
        <div></div>
        <div class="zzz"></div>
        <div class="one"></div>
        <div></div>
        <div></div>
        <div class="zzz"></div>
      </div>
      <div class="aaa">
        <div class="gei">
          <div class="rrr1">
            <span class="apply1">申请理由</span>
            <span class="apply2">申请人签名：</span>
            <span class="apply3">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
          </div>
          <div class="rrr1">
            <span class="apply1">院系意见</span>
            <span class="apply4">（公章）</span>
            <span class="apply3">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
          </div>
          <div class="rrr1">
            <span class="apply1" style="top: 0.2cm;">学校审核意见：</span>
            <span class="apply4">（公章）</span>
            <span class="apply3">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.page-pdf {
  width: 21cm;
  height: 29.7cm;
  padding: 1.6cm 2.6cm;
  margin: auto;
  font-size: 13.8px;
  font-family: 'FangSong', '仿宋', serif;
}
.page div {
  border: 1px solid black;
  border-collapse: collapse;
}
.page {
  display: grid;
  grid-template-columns: 8% 92%;
  grid-template-rows: 5fr 4fr 6fr 4fr 4fr 4fr;
  border: 1px solid black;
  height: 80%;
}
.title p{
  font-family: 'SimSun', '宋体', serif;
  font-weight: bolder;
}

h2 {
  font-family: '黑体';
  font-size: 21.2px;
  font-weight: normal;
}
p {
  text-align: center;
  font-size: 24px;


}
.men {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 2fr 2fr 3fr 3fr;
  grid-template-rows: repeat(5,1fr);
}
.men div,
.family div,
.study div {
  padding-top: 10px;
}
.study .one {
  grid-column: 1/span 2;
}
.study .zzz {
  grid-column: 5/span 3;
}
.family {
  display: grid;
  grid-template-columns: 2fr 0.5fr 2fr 2.4fr 1.6fr 3fr 3fr;
  grid-template-rows: 1fr 1fr 2fr;
}
.study {
  display: grid;
  grid-template-columns: 2fr 0.5fr 2fr 2.4fr 1.6fr 3fr 3fr;
  grid-template-rows: repeat(6,1fr);
}
.imge {
  grid-row: 1/span 5;
  grid-column: 7;
}
.xuehao {
  grid-row: 3;
  grid-column: 2/span 3
}
.hao {
  grid-row: 4;
  grid-column: 2/span 3
}
.col {
  grid-row: 5;
  grid-column: 1/span 6;
}
.family .one {
  grid-column: 1/span 2;
}
.family .one1 {
  grid-column: 3/span 5;
}
.family .two {
  grid-column: 3/span 3;
}
.family .ccc {
  padding-top: 20px;
}
.page span.left {
  display: block;
  padding-bottom: 12px;
}
div.yc {
  border-color: white;
}

.page div {
  text-align: center;
}
div.center {
  display: grid;
  align-items: center;
  text-align: center;
}
div.aaa {
  grid-column: 1/span 2;
  grid-row: 4/span 3;
}
div.gei {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(3,1fr);
  border: 0;
}
div.gei .rrr1 {
  position: relative;
}
div.rrr1 .apply1,
div.rrr1 .apply2,
div.rrr1 .apply3,
div.rrr1 .apply4  {
  position: absolute;
}
span.apply1 {
  top: 0;
  left: 0.2cm;
}
span.apply2 {
  bottom: 2px;
  left: 8cm;
}
span.apply3 {
  bottom: 2px;
  right: 1cm;
}
span.apply4 {
  bottom: 2px;
  left: 9cm;
}
</style>
